<template>
  <el-dialog title="添加用户" :visible.sync="drawerVisible" width="1180px" :before-close="cancelForm">
    <el-row class="drawerForm">
      <el-col :span="6" class="tree">
        <el-input v-model="filterText" placeholder="输入关键字进行过滤" style="padding-bottom: 10px" />
        <el-tree
          ref="tree"
          style="height: calc(100% - 52px); overflow-y: auto"
          :data="departmentTree"
          default-expand-all
          node-key="id"
          highlight-current
          :expand-on-click-node="false"
          :filter-node-method="filterNode"
          :props="{
            children: 'children',
            label: 'label'
          }"
          @node-click="nodeClick"
        >
          <span slot-scope="{ node }">
            <i class="el-icon-office-building" />
            <span style="padding-left: 5px">{{ node.label }}</span>
          </span>
        </el-tree>
      </el-col>
      <el-col :span="18" class="userBox">
        <div class="searchDiv">
          <span>登录账号：</span>
          <el-input v-model="searchData.params.loginName" placeholder="请输入登录账号" class="searchInput" />
          <span>用户名称：</span>
          <el-input v-model="searchData.params.userName" placeholder="请输入用户名称" class="searchInput" />

          <el-button type="primary" @click="searchClick">搜索</el-button>
          <el-button @click="clearClick">重置</el-button>
          <el-button type="primary" style="float: right" @click="handleAdd">添加用户</el-button>
        </div>
        <myTable
          ref="myTable"
          v-loading="loading"
          style="height: calc(100% - 94px) !important"
          :row-key="'userId'"
          :table-label="tableLabel"
          :table-data="tableData"
          :table-total-size="tableTotalSize"
          :search-data="searchData"
          @getTableData="getTableData"
          @handleSelectionChange="handleSelectionChange"
        />
        <pagination
          class="myPagination"
          :table-total-size="tableTotalSize"
          :search-data="searchData"
          @getTableData="$refs.myTable.getTableData()"
        />
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import { loadUserGridOutRole } from '@/api/system-management'
import { getDepartmentNodeTree } from '@/api/table'
import myTable from '@/components/Table/index'
import pagination from '@/components/Table/pagination'
export default {
  name: 'SelectRoleUser',
  components: {
    myTable,
    pagination
  },
  data() {
    return {
      filterText: '',
      departmentTree: [],
      drawerVisible: false,
      searchData: {
        pageSize: 15,
        currentPage: 1,
        sort: {},
        params: {
          loginName: '',
          userName: ''
        }
      },
      loading: false,
      tableData: [],
      tableLabel: [
        {
          type: 'selection',
          width: 55,
          show: true
        },
        {
          prop: 'loginName',
          label: '登录账号',
          showOverflowTooltip: true
        },
        {
          prop: 'userName',
          label: '用户名称',
          showOverflowTooltip: true
        },
        {
          prop: 'jobCode',
          label: '工号',
          width: 150,
          showOverflowTooltip: true
        },
        {
          prop: 'departmentName',
          label: '所在部门',
          width: 200,
          showOverflowTooltip: true
        }
      ],
      tableTotalSize: null,
      multipleSelection: []
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {
    getDepartmentNodeTree().then((res) => {
      this.departmentTree = [res.data]
    })
  },
  mounted() {},
  methods: {
    is(roleId) {
      this.searchData.params.roleId = roleId
      this.drawerVisible = true
    },
    // 取消表单
    cancelForm() {
      this.$emit('closeDialog')
      this.drawerVisible = false
    },
    // 获取tableData
    getTableData(cab) {
      this.loading = true
      loadUserGridOutRole(this.searchData).then((res) => {
        this.loading = false
        this.tableData = res.data.data
        this.tableTotalSize = res.data.total_count
        cab(res.data.data)
      })
    },
    // 搜索
    searchClick() {
      this.searchData.currentPage = 1
      this.$refs.myTable.getTableData()
    },
    clearClick() {
      this.searchData.params.departmentId = undefined
      this.searchData.params.loginName = ''
      this.searchData.params.userName = ''
      this.$refs.tree.setCurrentKey(null)
      this.searchClick()
    },
    // 复选框回调函数
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleAdd() {
      if (this.multipleSelection.length === 0) {
        this.$message.warning('请至少选择一条数据')
        return
      }
      this.drawerVisible = false
      this.$emit(
        'submit',
        this.multipleSelection.map((item) => item.userId)
      )
    },
    // 以下树函数
    // 过滤树函数
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    // 点击节点
    async nodeClick(node) {
      this.searchData.params.departmentId = node.company ? undefined : node.id
      this.searchClick()
    }
  }
}
</script>

<style lang="less" scoped>
.drawerForm {
  display: flex;
  // flex-direction: column;
  height: 600px;
  .tree {
    height: 100%;
  }
  .userBox {
    margin: 0 15px;
    height: 100%;
    .searchDiv {
      margin-bottom: 10px;
      font-size: 15px;
    }
  }
}

.pageTitle {
  padding-top: 15px;
  padding-left: 15px;
  font-size: 20px;
  .titleBorder {
    font-weight: bold;
    font-size: 22px;
    color: #00a0e9;
    margin-right: 5px;
  }
  .titleText {
    display: inline;
    padding-right: 20px;
    padding-left: 5px;
  }
}
.myPagination /deep/ .page {
  width: auto;
}
</style>
